import { useCallback, useState } from "react";
import AddTodo from "./AddTodo";
import TaskList from "./TaskList";
let nextId = 3;
const initialTodos = [
  {
    id: 0,
    title: "buy milk",
    done: true,
  },
  {
    id: 1,
    title: "eat tacos",
    done: false,
  },
];
export default function TaskApp() {
  const [todos, setTodos] = useState(initialTodos);

  const handleAddTodo = useCallback(
    (title) => {
      setTodos([...todos, { id: nextId++, title, done: false }]);
    },
    [todos]
  );
  const handleOnChange = (nextTodo) => {
    console.log(todos);
    setTodos(
      todos.map((t) => {
        if (t.id === nextTodo.id) {
          return nextTodo;
        } else {
          return t;
        }
      })
    );
  };
  const handleDelete = (id) => {
    setTodos(todos.filter((t) => t.id !== id));
  };
  return (
    <div>
      <AddTodo onAddTodo={handleAddTodo}></AddTodo>
      <TaskList
        onDeleteTodo={handleDelete}
        todos={todos}
        onChangeTodo={handleOnChange}
      ></TaskList>
    </div>
  );
}
